<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div ref="el" class="shanghaizhongruixinxuan">
    <Transition name="animate-zoomIn">
      <h1 v-show="show" class="line-center-title">
        上海中瑞心选
      </h1>
    </Transition>
    <div class="content">
      <Transition name="animate-fadeInLeft">
        <div v-show="show" class="flex flex-col items-center py-[36px]">
          <span
            class="text-[18px] text-666 font-medium leading-[36px]">上海中瑞心选网络科技有限公司致力于打造面向全国电影票务类的数字化智能营销平台，拥有自主研发的“欢银电影”票务平台，提供覆盖全国10000+影院在线选座购票服务，围绕电影票务积极拓展更多的应用场景，提供企业合作伙伴融合线上线下的整合营销解决方案，包括企业工会福利、银行营销活动、电影宣发活动等，为消费者提供更便捷安全的体验，目前已跻身内地主流电影票务平台之一。</span>
          <img class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/image-16.png" alt="">
        </div>
      </Transition>
      <Transition name="animate-fadeInRight">
        <img v-show="show" class="img" src="https://public-oss-file.zmaxfilm.com/website-compress/image-17.png" alt="">
      </Transition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shanghaizhongruixinxuan {
  padding-top: 50px;
  padding-bottom: 80px;
  background-color: #fafafa;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .content {
    gap: 48px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    margin-top: 45px;

    .logo {
      width: 172px;
      height: 52px;
      margin-top: 46px;
    }

    .img {
      width: 530px;
      height: 400px;
      flex-shrink: 0;
    }
  }
}
</style>
